<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入vue2的js文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>count is {{ count }}</p>
      <!-- <p>square is {{ count * count }}</p> -->
      <p>square is {{ square }}</p>
      <p>square is {{ square }}</p>
      <p>square is {{ square }}</p>
      <p>square is {{ square }}</p>
      <p>square is {{ square }}</p>

      <p>method calcSquare {{ calcSquare() }}</p>
      <p>method calcSquare {{ calcSquare() }}</p>
      <p>method calcSquare {{ calcSquare() }}</p>
      <p>method calcSquare {{ calcSquare() }}</p>
      <p>method calcSquare {{ calcSquare() }}</p>
      <p>
        <button @click="count++">+1</button>
      </p>
    </div>
    <script>
      new Vue({
        // 对象中的内容，我们一般叫做属性，但是也有些人叫做选项
        el: '#app',
        data: {
          count: 1
        },
        // 计算属性，它里面可以写很多计算函数，注意点：内部的计算属性函数，必须要返回值
        computed: {
          square() {
            console.log('---computed---square---')
            return this.count * this.count
          }
        },
        methods: {
          calcSquare() {
            console.log('---methods---calcSquare---')
            return this.count * this.count
          }
        }
      })
    </script>
  </body>
</html>
